<template>

  <el-dialog title="查看商品系列" :visible.sync="dialogVisible" @close="closeDialog" width="80%">
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button style="float: right" @click="handleSearchList()" type="primary" size="s米糕">
            查询结果
          </el-button>
          <el-button style="float: right;margin-right: 15px" @click="handleResetSearch()" size="s米糕">
            重置
          </el-button>
        </div>
        <div>
          <el-form :inline="true" :model="listQuery" size="s米糕" label-width="140px">
            <el-form-item label="输入搜索：">
              <el-input style="width: 203px" v-model="listQuery.tradename" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="tokenId：">
              <el-input style="width: 103px" type="number" v-model="listQuery.tokenId" placeholder="tokenId"></el-input>
            </el-form-item>
            <!-- <el-form-item label="商品分类：">
              <popupTreeInput :props.sync="searchTreeProps" :currentNode.sync="currentNftType"
                :data="productCateOptions" :currentChangeHandle="currentChangeHandle" />
            </el-form-item> -->

            <el-form-item label="上架状态：">
              <el-select v-model="listQuery.shelves" placeholder="全部" clearable>
                <el-option v-for="item in publishStatusOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button class="btn-add" @click="handleAddProduct()" size="mini">
          添加
        </el-button>
      </el-card>
      <div class="table-container">
        <el-table ref="productDetailTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
          v-loading="listLoading" border>
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{  scope.row.pid  }}</template>
          </el-table-column>
          <el-table-column label="商品图片" width="120" align="center">
            <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pictures"></template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template slot-scope="scope">
              <p>{{  scope.row.tradename  }}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格/tokenId" width="120" align="center">
            <template slot-scope="scope">
              <p>商品价格：￥{{  scope.row.price  }}</p>
              <p>tokenId：{{  scope.row.tokenId  }}</p>
            </template>
          </el-table-column>
          <el-table-column label="标签" width="140" align="center">
            <template slot-scope="scope">
              <p>上架：
                <el-switch @change="handlePublishStatusChange(scope.$index, scope.row)" :active-value="1"
                  :inactive-value="0" v-model="scope.row.sfsj">
                </el-switch>
              </p>
              <p>橱窗商品：
                <el-switch @change="handleShopwindowChange(scope.$index, scope.row)" :active-value="1"
                  :inactive-value="0" v-model="scope.row.shopwindow">
                </el-switch>
              </p>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" width="260" align="center">
            <template slot-scope="scope">
              <p>
                <el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑
                </el-button>
              </p>
              <p>
               <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </p>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="batch-operate-container">
        <el-select size="s米糕" v-model="operateType" placeholder="批量操作">
          <el-option v-for="(item, index) in operates" :key="index" :label="item.label" :value="index">
          </el-option>
        </el-select>
        <el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary"
          size="s米糕">
          确定
        </el-button>
      </div>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          layout="total,prev, pager, next,jumper" :page-size="size" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-dialog>


</template>

<script>
import { FetchProductDetailsList } from '../../../../../api/productdetail';
import { OPERATION_STATUS_BY_ARRAY, PUBLISH_STATUS_OPTIONS } from '../../../../../contanst/data';
import { DefaultListQueryByDetails } from '../../../../../entity/productDetail';
import { handleSizeChange } from "../../../../../page/page"
import { handleSelectionChange } from "../../../../../checkbox/handler"
import { PublishStatus, UpdateShopwindow } from "../../../../../api/productdetail"
export default {
  name: "ListByProductDetails",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listLoading: true,
      list: [],
      size: 15,
      operates: OPERATION_STATUS_BY_ARRAY,
      operateType: 0,
      publishStatusOptions: PUBLISH_STATUS_OPTIONS,
      total: 0,
      listQuery: { ...DefaultListQueryByDetails }
    }
  },

  mounted() {
  },
  computed: {
    dialogVisibleByData() {
      return this.dialogVisibleByData;
    }
  },

  methods: {
    handleSelectionChange,
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      FetchProductDetailsList(this.listQuery, this);
    },
    handleSizeChange,

    handleBatchOperate() {
      if (this.operateType == null) {
        this.$message({
          message: '请选择操作类型',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: '请选择要操作的商品',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      this.$confirm('是否要进行该批量操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];

        console.log(this.multipleSelection);
        for (let i = 0; i < this.multipleSelection.length; i++) {

          ids.push(this.multipleSelection[i].pid);
        }

        this.operates[this.operateType].function(ids);

        this.multipleSelection.forEach(e => {
          e[this.operates[this.operateType].key] = this.operates[this.operateType].status;
        });
      });
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.$emit("closeDialog", false)
    },
    // 上架状态
    handlePublishStatusChange(index, row) {
      let ids = [row.mid];
      PublishStatus({
        ids: ids,
        status: row.status
      });
    },

    handleShopwindowChange(index, row) {
      let ids = [row.mid];
      UpdateShopwindow({
        ids: ids,
        status: row.shopwindow
      });
    },

    handleSearchList() {
      FetchProductDetailsList(this.listQuery, this);
    },

    pullData(id) {
      this.listQuery.id = id;
      console.log("id", id);
      FetchProductDetailsList(this.listQuery, this);
    }
  }
}
</script>